const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

// 判断是否为生产模式
const isPord = process.env.NODE_ENV === "production";
// 排除项，做cdn优化，我们建议生产模式下才有必要排除
let externals = {};
// cdn资源  注意这里一开始就要有css 和js配置项
let cdn = { css: [], js: [] };
if (isPord) {
  (plugins = [
    new BundleAnalyzerPlugin({
      analyzerPort: 9999
    })
  ]),
    // key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
    (externals = {
      vue: "Vue",
      "element-ui": "ELEMENT",
      "vue-router": "VueRouter",
      axios: "axios",
      lodash: "_",
      echarts: "echarts",
      nprogress: "NProgress",
      "vue-quill-editor": "VueQuillEditor"
    });
  cdn = {
    css: [
      "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css",
      "https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css",
      "https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css",
      "https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css",
      "https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css"
    ],
    js: [
      "https://cdn.staticfile.org/vue/2.5.22/vue.min.js",
      "https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js",
      "https://cdn.staticfile.org/axios/0.18.0/axios.min.js",
      "https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js",
      "https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js",
      "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js",
      "https://cdn.staticfile.org/quill/1.3.4/quill.min.js",
      "https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js",
      "https://cdn.staticfile.org/element-ui/2.8.2/index.js"
    ]
  };
}

module.exports = {
  publicPath: isPord ? "./" : "/",
  configureWebpack: {
    externals: externals
  },
  chainWebpack: config => {
    // 配置 webpack-plugin-html 插件中的内容。 args[0] 表示配置信息，增加cdn变量
    config.plugin("html").tap(args => {
      args[0].cdn = cdn;
      return args; // 需要return
    });
  }
};
